<template>
  <div class="training-management">
    <div class="upper-section">
      <!-- 培训视频区域 -->
      <div class="video-section">
        <h2 class="video-section-header">培训视频</h2>
        <div class="video-container">
          <video width="240" height="180" controls>
            <source src="path_to_video_1.mp4" type="video/mp4">
            您的浏览器不支持视频标签。
          </video>
        </div>
        <div class="video-container">
          <video width="240" height="180" controls>
            <source src="path_to_video_2.mp4" type="video/mp4">
            您的浏览器不支持视频标签。
          </video>
        </div>
      </div>

      <!-- 上传新视频 -->
      <div class="upload-form">
        <h2 class="centered-header">上传新视频</h2>
        <form action="/upload" method="post" enctype="multipart/form-data">
          <input type="file" name="video" accept="video/*">
          <button type="submit">上传</button>
        </form>
      </div>

      <!-- 考核试卷区域 -->
      <div class="exam-paper-section">
        <h2 class="centered-header">上传试卷</h2>
        <form action="/upload" method="post" enctype="multipart/form-data">
          <input type="file" name="examPaper" accept="application/pdf">
          <button type="submit">上传</button>
        </form>
      </div>
    </div>

    <!-- 下半部分：培训证书记录 -->
    <div class="lower-section">
      <div class="certificate-record-section">
        <h2 class="centered-header">培训证书记录</h2>
        <div class="search-and-export">
          <!-- 搜索框 -->
          <input type="text" v-model="searchQuery" placeholder="搜索姓名或证书编号" />
          <!-- 搜索按钮 -->
          <button @click="searchRecords">搜索</button>
          <!-- 导出按钮 -->
          <button @click="exportToExcel">导出为Excel</button>
        </div>

        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>证书编号</th>
              <th>培训日期</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="record in filteredCertificateRecords" :key="record.id">
              <td>{{ record.name }}</td>
              <td>{{ record.certificateNumber }}</td>
              <td>{{ record.trainingDate }}</td>
              <td>
                <button @click="editRecord(record)">编辑</button>
                <button @click="deleteRecord(record)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>

        <!-- 分页控制 -->
        <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页</span>
    <button @click="nextPage" :disabled="currentPage === maxPage">下一页</button>
    <input type="number" v-model.number="jumpPage" placeholder="跳转到页码" />
    <button @click="goToPage(jumpPage)">跳转</button>
  </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      certificateRecords: [
        { id: 1, name: '张三', certificateNumber: 'C001', trainingDate: '2023-01-01' },
        { id: 2, name: '李四', certificateNumber: 'C002', trainingDate: '2023-02-01' },
        // ...其他记录
      ],
      currentPage: 1,
      pageSize: 10,
      jumpPage: 1
    };
  },
  computed: {
    filteredCertificateRecords() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.certificateRecords.slice(start, end);
    },
    maxPage() {
      return Math.ceil(this.certificateRecords.length / this.pageSize);
    }
  },
  methods: {
    searchRecords() {
      // 当搜索时，重置当前页码
      this.currentPage = 1;
      this.filteredCertificateRecords = this.certificateRecords.filter(
        record => record.name.includes(this.searchQuery) || record.certificateNumber.includes(this.searchQuery)
      );
    },
    exportToExcel() {
      // 实现导出逻辑（这里只是示意，具体实现需要使用JavaScript库来生成Excel文件）
    },
    editRecord(record) {
      // 实现编辑记录的逻辑
    },
    deleteRecord(record) {
      const index = this.certificateRecords.indexOf(record);
      if (index !== -1) {
        this.certificateRecords.splice(index, 1);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.maxPage) {
        this.currentPage++;
      }
    },
    goToPage(page) {
      if (page >= 1 && page <= this.maxPage) {
        this.currentPage = page;
      }
    }
  }
};
</script>



<style scoped>
.training-management {
  /* 全局样式 */
}

.video-section-header {
  text-align: center; /* 使得标题居中显示 */
  margin-bottom: 20px; /* 在标题和视频容器之间添加一些间隔 */
}


.centered-header {
    text-align: center; /* 居中文本 */
  }


.upper-section {
  display: flex;
  justify-content: space-between;
  /* flex-direction: column; */
  margin-bottom: 30px;
  width: 100%;
}

.lower-section {
  width: 100%;
}
.spacer {
  flex-grow: 1; /* 或者你可以设置一个固定的宽度，例如 width: 20px; */
}

.video-container {
  margin-right: 20px; /* 在视频之间添加间隔 */
}

.video-section{
  /* 共享样式，使它们并排显示 */
  flex: 1; /* 使两个部分平均分配空间 */
  margin-right: 10px; /* 添加间隔 */
  margin-left: 40px;
  display: flex;
}


.certificate-record-section {
  /* 下半部分样式 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

button {
  cursor: pointer;
  padding: 5px 10px;
  margin-right: 5px;
}

.pagination {
  margin-top: 20px;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.upload-form {
  margin-right: 20px; /* 在上传表单和视频之间添加间隔 */
}

.upload-form form {
  display: flex;
  flex-direction: column;
}

.upload-form input[type="file"] {
  margin-bottom: 10px; /* 在文件输入和按钮之间添加间隔 */
}

..exam-paper-section {
  margin-right: 20px; /* 在上传表单和视频之间添加间隔 */
}

..exam-paper-section form {
  display: flex;
  flex-direction: column;
}

..exam-paper-section input[type="file"] {
  margin-bottom: 10px; /* 在文件输入和按钮之间添加间隔 */
}

.search-and-export {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px; /* 添加一些底部间隔 */
}

.search-and-export input[type="text"] {
  margin-right: 10px; /* 在搜索框和按钮之间添加间隔 */
}

.search-and-export button {
  margin-left: 10px; /* 在按钮之间添加间隔 */
}

.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin-top: 20px; /* 可选，添加一些顶部间隔 */
}

.pagination input,
.pagination button {
  margin: 0 5px; /* 添加一些间隔 */
}
</style>
